<template>
<div class="mClassDetail">
  <!-- 面包屑 -->
  <div class="studentDetail-header">
    <el-breadcrumb separator="/" class="studentDetail-headerbottom">
      <el-breadcrumb-item :to="{ path: '/mentor/mentorClass' }">班级管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生信息</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="mcd-main">
    <div class="mcd-main-box">
      <div style="font-weight: 500;">学生信息</div>
      <el-form
          label-width="60px"
          label-position="left"
          :model="mentorClassStore.mCDetailData"
          class="studentUserForm"
          >
          <el-form-item label="姓名" required>
            <el-input v-model="mentorClassStore.mCDetailData.name" disabled/>
          </el-form-item>
          <el-form-item label="学号" required>
            <el-input v-model="mentorClassStore.mCDetailData.id" disabled/>
          </el-form-item>
          <el-form-item label="年级" required>
            <el-input v-model="mentorClassStore.mCDetailData.grade" disabled/>
          </el-form-item>
          <el-form-item label="专业" required>
            <el-input v-model="mentorClassStore.mCDetailData.major" disabled/>
          </el-form-item>
          <el-form-item label="班级" required>
            <el-input v-model="mentorClassStore.mCDetailData.classname" disabled/>
          </el-form-item>
        </el-form>
    </div>
  </div>

</div>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router';
import { useMentorClassStore } from '@/stores/mentor/mClass';

const mentorClassStore = useMentorClassStore()
const route = useRoute()

onBeforeMount(() => {
  const userId = route.query.id
  mentorClassStore.mCDetailRequest(userId)
})

</script>

<style scoped lang="scss">
.mClassDetail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .studentDetail-headerbottom {
      width: 100%;
      height: 8vh;
      line-height: 8vh;
      padding: 0 40px;
      font-size: 17px;
      :deep(.el-breadcrumb__inner) {
        font-weight: normal;
        color: #7f7f7f;
      }
  }

  .mcd-main {
    width: 100%;
    height: 100%;

    .mcd-main-box {
      width: 90%;
      margin: auto;
      background-color: #fff;
      padding: 30px;
      .studentUserForm {
        width: 40%;
        transform: translateX(30%);
        .el-form-item {
          margin: 30px;
        }
        :deep(.el-form-item__label) {
          font-size: 15px;
          color: #000;
        }
        :deep(.el-input__wrapper) {
          background-color: #f2f3f5ff;
          border: 0;
        }
      }
    }
  }
}
</style>